import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:kiomax/config/image_config.dart';
import 'package:kiomax/utils/screen_util.dart';
import '../../config/string_config.dart';
import '../../config/color_config.dart';
import '../../config/text_style_config.dart';
import '../../widgets/title/title_widget.dart';

class InstallReaderPage extends StatefulWidget {
  const InstallReaderPage({Key? key}) : super(key: key);

  @override
  State<InstallReaderPage> createState() => _InstallReaderPageState();
}

class _InstallReaderPageState extends State<InstallReaderPage> {
  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      appBar: TitleWidget(
          isHome: true, context: context, scaffoldKey: _scaffoldKey),
      backgroundColor: ColorConfig.white,
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 16),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                'Install Reader',
                style: TextStyleConfig.heading20.copyWith(
                  color: const Color(0xFF002B66),
                  fontWeight: FontWeight.w700,
                  fontSize: 22,
                ),
              ),
               SizedBox(height: ScreenUtil.setHeight(16)),
              SizedBox(
                height: ScreenUtil.designHeight * 0.23,
                child: _buildCard(
                  context,
                  image: ImageConfig.reader_new,
                  title: 'Set Up New Reader',
                  subtitle: 'Create new machine settings from scratch',
                  onTap: () {},
                ),
              ),
              SizedBox(height: ScreenUtil.setHeight(16)),
              SizedBox(
                height: ScreenUtil.designHeight * 0.23,
                child: _buildCard(
                  context,
                  image: ImageConfig.reader_profile,
                  title: 'Start From an Existing Profile',
                  subtitle:
                      'Use a previously created profile as\na starting point',
                  onTap: () {},
                ),
              ),
              SizedBox(height: ScreenUtil.setHeight(16)),
              SizedBox(
                height: ScreenUtil.designHeight * 0.23,
                child: _buildCard(
                  context,
                  image: ImageConfig.reader_template,
                  title: 'Start From a Template',
                  subtitle: 'Use a pre-defined template profile',
                  onTap: () {},
                ),
              ),
              // const Spacer(),
              // GestureDetector(
              //   onTap: () => Navigator.of(context).pop(),
              //   child: Row(
              //     mainAxisAlignment: MainAxisAlignment.start,
              //     children: [
              //       const Icon(Icons.chevron_left, color: Color(0xFF666666)),
              //       const SizedBox(width: 4),
              //       Text('Back',
              //           style: TextStyleConfig.itemLabel
              //               .copyWith(color: const Color(0xFF666666))),
              //     ],
              //   ),
              // ),
              const SizedBox(height: 8),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildCard(BuildContext context,
      {required String image,
      required String title,
      required String subtitle,
      required VoidCallback onTap}) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        width: double.infinity,
        padding: const EdgeInsets.symmetric(vertical: 24, horizontal: 16),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(20),
          boxShadow: [
            BoxShadow(
              color: Colors.black.withOpacity(0.08),
              blurRadius: 12,
              offset: const Offset(0, 4),
            ),
          ],
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            // TODO: 替换为SVG图片
            SizedBox(
              height: ScreenUtil.designHeight * 0.1,
              child: SvgPicture.asset(
                image,
                fit: BoxFit.contain,
              ),
            ),
             SizedBox(height: ScreenUtil.setHeight(2)),
            Text(
              title,
              style: TextStyleConfig.heading20.copyWith(
                fontSize: ScreenUtil.setSp(16),
                fontWeight: FontWeight.w600,
                color: ColorConfig.titleTextColor,
              ),
              textAlign: TextAlign.center,
            ),
             SizedBox(height: ScreenUtil.setHeight(2)),
            Text(
              subtitle,
              style: TextStyleConfig.itemLabel.copyWith(
                color: const Color(0xFF757575),
                fontSize: 14,
              ),
              textAlign: TextAlign.center,
            ),
          ],
        ),
      ),
    );
  }
}
